<template>
  <div>
    <!--    导航条-->
    <el-menu :router="true" :default-active="activeIndex" style="width: 50%" class="el-menu-demo" background-color="white" font-color="#303133" mode="horizontal" @select="handleSelect" >
      <el-menu-item  index="/">首页</el-menu-item>
      <el-menu-item  index="/news">新闻</el-menu-item>
      <el-menu-item index="/newsList/7">科技</el-menu-item>
      <el-menu-item index="/newsList/2">娱乐</el-menu-item>
      <el-menu-item index="/newsList/10">时尚</el-menu-item>
      <el-menu-item index="/newsList/3">体育</el-menu-item>
      <el-menu-item index="/newsList/8">财经</el-menu-item>
      <el-menu-item index="/newsList/4">军事</el-menu-item>
      <el-menu-item index="/newsList/5">国际</el-menu-item>



    </el-menu>
    <div style="width: 30%; position: absolute; left: 650px; top: 30px">
      <!--          <el-link  icon="el-icon-edit" @click="editNews()">编辑新闻</el-link>-->
      <el-input v-model="searchNews" placeholder="请输入搜索内容"><i slot="suffix" style="cursor: pointer" class="el-input__icon el-icon-search" @click="selectNews()"></i></el-input>

    </div>
    <div style="width: 10%; position: absolute; left: 1150px; top: 40px">
      <el-link icon="el-icon-user-solid" @click="toperson()">个人中心</el-link>
    </div>
  </div>

</template>
<script>
//单页面引入axios
import axios from 'axios';
export default {
  name: "index",
  data() {
    return {
      bannerHeight: 0,
      //浏览器宽度
      screenWidth: 0,
      //导航条
      activeIndex: '1',
    };
  },
  methods: {
    findPage() {
      this.$router.push("/context");
    },
    toperson() {
      this.$router.push("/userinfoindex");
    },
    //触发搜索新闻方法
    selectNews() {
      axios.get("").then(res => {
        res.data;
      })
    },
    //导航条
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
      window.location.reload();
    },
    //加载新闻
    load() {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 1000)
    },
  },
  mounted() {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth
    this.bannerHeight = 600 / 1550 * this.screenWidth
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.bannerHeight = 600 / 1550 * this.screenWidth
    }
    //在进前端后先执行mounted方法,去到方法中
    this.findImage();
    //找新闻的方法
    this.findNew();
  }
}
</script>

<style scoped>

</style>
